<script type="text/javascript" src="js/jquery.js" ></script>
<script  type="text/javascript" type="text/javascript">

/* 
  (tipo = feet, sempre) + base_mat --> opzione1 --> art --> base_size --> stud_lenght --> stud_mat --> stud_size --> opzione2
*/
 
$(document).ready(function() {

	load("base_mat","base_mat");

	$("#clear").click(function() {
	     $("#modulo")[0].reset();
	     $("#product").text("");
	     $("select").not("#type , #base_mat").empty();
	});	
	
	$("#base_mat").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("option1","option1");
	});

	$("#option1").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("art","art");
	});

	$("#art").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("base_size","base_size");
	});	

	$("#base_size").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("stud_lenght","stud_lenght");
	});	

	$("#stud_lenght").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("stud_mat","stud_mat");
	});	

	$("#stud_mat").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("stud_size","stud_size");
	});	

	$("#stud_size").change(function() {
		$("#product").text("");
		var idx = $("select").index(this);
		$("select:gt("+idx+")").empty();
		load("option2","option2");
	});

	$("#option2").change(function() {
		$("#product").text("");
		product();
	});	

	function load(tipo,id){
		$("#azione").val(tipo);
		$("#loading").css("display","inline");
		$.ajax({ url: './search.php',
			data: $("#modulo").serialize(),
			type: 'post',
			success: function(output) {
				var res = $.parseJSON(output);
				$("#"+id).empty();
				$("#"+id).append("<option selected='selected' value='' ></option>");
				$.each(res, function(index, value){
					$("#"+id).append(new Option(value, value, false, false));
				});
			},
			error: function(output) {
				alert("ERRORE");
			},
			complete:$("#loading").css("display","none")
		});
	}

	function product(){
		$("#azione").val("product");
		$("#loading").css("display","inline");
		$.ajax({ url: './search.php',
			data: $("#modulo").serialize(),
			type: 'post',
			success: function(output) {
				//alert(output);
				var res = $.parseJSON(output);
				$.each(res, function(index, prod){
					$("#product").append("<p>"+prod[0]+" - "+prod[1]+"</p>");
				});
			},
			error: function(output) {
				alert("ERRORE");
			},
			complete:$("#loading").css("display","none")
		});
	}
});

</script>
<html>
<body>
	<div id="container">
	<form id="modulo" name="modulo">
		<input type="hidden" id="azione" name="azione" value="init"></input>
		
		<div>Product Type
		<select id="type" name="type">
			<option value="FEET">FEET</option>
		</select>
		</div>
		
		<div>Base Mat
			<select id="base_mat" name="base_mat">
			</select>
		</div>
		
		<div>Option 1
			<select id="option1" name="option1">
			</select>
		</div>
		
		<div>Art
			<select id="art" name="art">
			</select>
		</div>
		
		<div>Base Size
			<select id="base_size" name="base_size">
			</select>
		</div>
		
		<div>Stud Length
			<select id="stud_lenght" name="stud_lenght">
			</select>
		</div>
		
		<div>Stud Mat
			<select id="stud_mat" name="stud_mat">
			</select>
		</div>
		
		<div>Stud size
			<select id="stud_size"name="stud_size">
			</select>
		</div>
		
		<div>Option 2
			<select id="option2" name="option2">
			</select>
		</div>
		
		<br/>
		<input id="clear" name="clear" type="button" value="Reset" />
		<!--  
		<input id="search" name="search" type="button" value="Search" />
		-->
		<br/>
		<div id="product">
		</div>
	</form>
		<div><img id="loading" src="images/loading.png" style="display:none;width:48px;position: absolute;left:150px;top:50px;"/></div>
	</div>
	
</body>
</html>